<script setup>
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
import { Link } from '@inertiajs/vue3'
import ChevronDownIcon from './icons/ChevronDownIcon.vue'
import CloseIcon from './icons/CloseIcon.vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <Popover v-slot="{ open }" class="pointer-events-auto md:hidden">
    <PopoverButton class="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
      菜单
      <ChevronDownIcon class="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" />
    </PopoverButton>

    <teleport v-if="open" to="body">
      <div class="fixed inset-0 z-40 bg-zinc-800/40 backdrop-blur-sm transition-opacity duration-150 dark:bg-black/80" />
    </teleport>

    <PopoverPanel
      class="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 transition duration-150 ease-out dark:bg-zinc-900 dark:ring-zinc-800"
    >
      <div class="flex flex-row-reverse items-center justify-between">
        <PopoverButton aria-label="关闭菜单" class="-m-1 p-1">
          <CloseIcon class="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
        </PopoverButton>
        <h2 class="text-sm font-medium text-zinc-600 dark:text-zinc-400">
          导航
        </h2>
      </div>
      <nav class="mt-6">
        <ul class="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
          <li v-for="item in props.items" :key="item.href ?? item.name">
            <PopoverButton as="div">
              <Link
                :href="item.href"
                class="block py-2"
              >
                {{ item.name }}
              </Link>
            </PopoverButton>
          </li>
        </ul>
      </nav>
    </PopoverPanel>
  </Popover>
</template>
